<template>
    <view v-if="metadata.options.beforeIcon">
        <my-icon :type="metadata.options.beforeIcon"></my-icon>
    </view>
    <view v-if="range">
        {{i18n('NotSupported','暂不支持')}}
    </view>
    <view v-else>
        <slider
            :value="curValue"
            @change="sliderChange"
            :min="min"
            :max="max"
            :step="step"
            show-value
            :block-size="20"
            :disabled="readOnly"
        />
    </view>
    <view v-if="metadata.options.afterIcon">
        <my-icon :type="metadata.options.afterIcon"></my-icon>
    </view>
</template>

<script>
import MForm from "../js/MForm";

/**
 * 滑动条
 *
 */
export default {
    name: "MSlider",
    mixins: [MForm],
    components: {},
    props: {},
    data() {
        return {
            curValue: 0,
            priceValue: [18, 40]
        }
    },
    computed: {
        range() {
            return this.metadata.options.range;
        },
        max() {
            return this.metadata.options.max || 100;
        },
        min() {
            return this.metadata.options.min || 0;
        },
        step() {
            return this.metadata.options.step || 1;
        },
    },
    created() {
        this.initValue(this.value)
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        initValue(value) {
            if (!value) return;
            //双滑动条
            if (this.range) {

            } else {
                this.curValue = Number(value);
            }
        },
        sliderChange(e) {
            this.setValue(e.detail.value);
        },
        setValue(value) {
            //双滑动条
            if (this.range) {

            } else {
                this.setData(value);
            }
        },
    },
    watch: {
        value(val) {
            this.initValue(val);
        }
    },
}
</script>

<style scoped>

</style>
